<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <!-- form就是表单域 -->
    <form action="demo.php" method="POST" name="name1">
        <h4>input 输入</h4>
        <!-- type属性，text表示文本框 maxlength 表示可以输入的最多输入数 -->
        用户名：<input type="text" maxlength="6" name="uname" value="请输入姓名">
        <br><!-- password 表示密码-->
        密 码：<input type="password" name="pwd">
        <br>
        <!-- radio 表示单选按钮 可以实现多选一 name值必须用相同的名字-->
        <!-- 单选按钮和复选框可以设置 checked 属性，当页面打开默认选中这个选项 -->
        性 别：男 <input type="radio" name="sex" value="男">
        女 <input type="radio" checked name="sex" value="女">
        <br><!-- checkbox 表示复选框 可以实现多选-->
        爱好：吃饭 <input type="checkbox" name="love" value="吃饭">
        睡觉 <input type="checkbox" checked name="love" value="睡觉">
        打豆豆 <input type="checkbox" name="love" value="打豆豆">
        <br>
        <!-- 提交表单数据的按钮，提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单初始的默认状态 -->
        <input type="reset" value="重置按钮">
        <!-- 普通 button ，后期与js搭配使用 -->
        <input type="button" value="提交短信验证码">
        <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像：<input type="file">

        <h4>label 标签</h4>
        <label for="text">用户名:</label>
        <input id="text" type="text" maxlength="6" name="uname2" value="请输入姓名">
        <br>
        性 别：
        <label for="nan">男</label>
        <input id="nan" type="radio" name="sex2" value="男">
        <label for="nv">女</label>
        <input id="nv" type="radio" checked name="sex2" value="女">

        <h4>select 下拉选择</h4>
        <select name="" id="">
            <!-- selected 为默认选中 -->
            <option value="">山东</option>
            <option value="" selected>天津</option>
            <option value="">上海</option>
            <option value="">辽宁</option>
            <option value="">天庭</option>
        </select>

        <h4>textarea 文本域</h4>
        今日反馈：
        <!-- cols 表示显示列数， rows表示显示行数 -->
        <textarea name="" id="" cols="30" rows="10">
            pink老师，我是跟着你学的
        </textarea>

    </form>
</body>

</html>